<template>
	<view class="container">
		<view @click="show = true">
			<up-input
				placeholder="请选择物料"
				v-model="productName"
				border="surround"
				readonly
				:customStyle="{
					pointerEvents: 'none'
				}"
			></up-input>
		</view>

		<!-- 物料弹框 -->
		<up-popup mode="right" :customStyle="{width: '100vw', height: '100vh'}" v-model:show="show">
			<up-navbar title="物料选择" :autoBack="false" placeholder @leftClick="closePopup"></up-navbar>
			<view>搜索</view>
			<zb-table
				:show-header="true"
				:columns="column"
				:stripe="true"
				:fit="false"
				@rowClick="rowClick"
				:border="true"
				:data="data"
			>
			</zb-table>
			<view>
				分页
			</view>
		</up-popup>
	</view>
</template>

<script>
import org from "@/apis/cloud/org.js"

export default {
	props: {
		selected: {
			default: () => {
				return []
			},
			type: Array
		},
	},
	data() {
		return {
			show: false,
			pageNo: 1,
			pageSize: 15,
			total: 0,
			keywords: '',
			loading: false,
			data: [],
			productName: '',
			current: null,
			column: [
				{ name: 'product_name', label: '物料名称' },
				{ name: 'rule_name', label: '规格名称' },
				{ name: 'category_name', label: '物料分类' },
				{ name: 'material_num', label: '库存数量' },
				{ name: 'rule_price', label: '单价' },
				{ name: 'rule_danwei', label: '单位' },
			]
		}
	},
	mounted() {
		this.getList();
	},
	methods: {
		getList() {
			const params = { name: this.keywords, page: this.pageNo, row: this.pageSize, brand_name: ''};
      org.getMaterial(params).then(rsp => {
        this.total = rsp.count
        this.data = rsp.data

				// console.log('====', this.data)
      }).catch(err => {
        this.loading = false
      })
    },
		rowClick(event) {

		},
		// 关闭抽屉
		closePopup() {
			this.show = false;
		},
	}
}
</script>

<style>

</style>
